<template>
    <div>
      <div class="nav-headers">
        <div style="margin-left: 20px;font-size: 20px;font-weight: bold">AbinBev D-TR</div>
        <div class="nav-info">
          <div><img src="../assets/login.jpg" alt="" class="nav-info-img"></div>
          <div class="nav-name">bee</div>
        </div>
      </div>
      <el-container style="height: calc(100vh - 60px); ">
        <el-aside width="200px" style="background-color: #c43200;text-align: left">
          <div style="margin: 20px;">菜单</div>
          <el-menu :default-openeds="['1','2']">
            <el-submenu index="1">
              <template slot="title">看板展示</template>
              <el-menu-item @click="ckMenu('packaging')" index="包装" style="color:#fff">包装</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">主数据维护</template>
              <el-menu-item @click="ckMenu('answer')" index="2-1" style="color:#fff">答案库</el-menu-item>
              <el-menu-item @click="ckMenu('kpiTree')" index="2-2" style="color:#fff">KPI树</el-menu-item>
            </el-submenu>
<!--            <el-submenu index="2">-->
<!--              <template slot="title">BI分析设计</template>-->
<!--              <el-menu-item @click="ckMenu()" style="color:#fff" index="BI分析设计">BI分析设计</el-menu-item>-->
<!--            </el-submenu>-->
<!--            <el-submenu index="3">-->
<!--              <template slot="title">模型管理</template>-->
<!--              <el-menu-item @click="ckMenu()" style="color:#fff" index="模型管理">模型管理</el-menu-item>-->
<!--            </el-submenu>-->
<!--            <el-submenu index="4">-->
<!--              <template slot="title">系统管理</template>-->
<!--              <el-menu-item @click="ckMenu()" style="color:#fff" index="系统管理">系统管理</el-menu-item>-->
<!--            </el-submenu>-->
<!--            <el-submenu index="5">-->
<!--              <template slot="title">主数据管理</template>-->
<!--              <el-menu-item @click="ckMenu()" style="color:#fff" index="主数据管理">主数据管理</el-menu-item>-->
<!--            </el-submenu>-->
<!--            <el-submenu index="6">-->
<!--              <template slot="title">看板管理</template>-->
<!--              <el-menu-item @click="ckMenu()" style="color:#fff" index="看板管理">看板管理</el-menu-item>-->
<!--            </el-submenu>-->
          </el-menu>
        </el-aside>

        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>

    </div>
</template>

<script>
    export default {
        name: "home",
      data() {
        const item = {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        };
        return {
          tableData: Array(20).fill(item)
        }
      },
      methods:{
        ckMenu(val){
          if(val == 'packaging'){
            window.open("/#/packaging")
          }else{
            this.$router.push({path:val})
          }
          // window.open("http://192.168.1.107:8080/#/" + val + "?id=2")

        }
      }
    }
</script>

<style type="text/css">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #fff;
  }
  .nav-headers{
    height: 60px;
    background-color: #892000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
  .el-menu{
    background-color: #c43200 !important;
    color: #fff !important;
  }
  /*父级列表移入样式*/
  .el-submenu__title:focus,.el-submenu__title:hover{
    background-color:#c43200 !important;
  }
  /*子级列表移入样式*/
  .el-menu-item:focus, .el-menu-item:hover{
    background-color:#c43200 !important;
    color: #f18100 !important;
  }
  .el-submenu__title{
    color: #fff !important;
  }
  /*点击时的样式*/
  .el-menu-item.is-active{
    color: #fff !important;
    background-color: #f59c00 !important;
    /*box-sizing: border-box;*/
    /*border-right: 2px solid #f18100;*/
  }
  .el-icon-arrow-down:before{
    color: #fff;
  }
  .nav-info{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav-info-img{
    width: 35px;
    height: 35px;
    border-radius: 50%;
  }
  .nav-name{
    color: #fff;
    margin-left: 10px;
    margin-right: 20px;
  }
</style>
